<template>
  <van-list
    class="p-1"
    @load="onLoad"
    :loading="loading"
    :finished-text="'没有更多了'"
    :finished="finished"
  >
    <div
      v-for="item in datas"
      :key="item.id"
      class="border justify-between bg-white p-1 mb-2 text-sm space-y-1 rounded"
    >
      <div class="flex justify-between items-center">
        订单号：{{ item.orderNo
        }}<van-tag
          :color="getWithdrawalColor(item.status)['backgroundColor']"
          :text-color="getWithdrawalColor(item.status)['color']"
          >{{ orderStatus[item.status] }}</van-tag
        >
      </div>
      <div class="flex justify-between">
        <div>
          <div>订单金额：{{ item.amount }}</div>
          <div>USDT金额：{{ item.USDT }}</div>
          <div class="space-x-2">
            <span>提现姓名：{{ item.getTemId?.name }}</span>
            <span>提现账号：{{ item.getTemId?.card }}</span>
          </div>
          <div>手续费：{{ item.free }}</div>
          <div>创建时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
        <div v-if="status === 0" class="flex flex-col space-y-2 items-center justify-center">
          <!-- <button class="bg-blue-400 px-3 rounded-lg text-white">修改</button> -->
          <button @click="cancelOrder(item.id)" class="bg-red-400 px-3 rounded-lg text-white">
            取消
          </button>
        </div>
      </div>
    </div>
  </van-list>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { GetWithdrawalApi, CancelOrderApi } from '@/apis/withdrawal'
import dayjs from 'dayjs'
import { showNotify } from 'vant'
import { getWithdrawalColor } from '@/utils/order'

const props = defineProps({
  status: {
    type: Number,
    default: 0
  }
})

const loading = ref(false)
const finished = ref(false)

const page = ref(1)

const datas = ref([])

const orderStatus = ['等待审核', '审核中', '审核成功', '审核失败', '取消提现']

function onLoad() {
  loading.value = true
  GetWithdrawalApi({
    page: page.value,
    status: props.status
  })
    .then((res) => {
      const { list } = res
      if (list.length > 0) {
        datas.value = [...datas.value, ...list]
        page.value++
      } else {
        finished.value = true
      }
    })
    .finally(() => {
      loading.value = false
    })
}

watch(
  () => props.status,
  () => {
    datas.value = []
    page.value = 1
    finished.value = false
    onLoad()
  }
)

function cancelOrder(id) {
  // 取消订单
  CancelOrderApi({ id }).then(() => {
    page.value = 1
    datas.value = []
    onLoad()
    showNotify({
      type: 'success',
      message: '取消提现成功'
    })
  })
}

function reLoad() {
  page.value = 1
  datas.value = []
  onLoad()
}

defineExpose({
  reLoad
})
</script>
